<template>
	<view class="wrap">
		<up-notice-bar :text="text1"></up-notice-bar>
		<up-form labelPosition="left" :model="form" :rules="rules" ref="form1">
			<view class="box">
				<up-form-item label="项目" prop="name">
					<up-input @click="show=!show" v-model="form.name" disabled disabledColor="#ffffff" placeholder="请选择项目"
						border="none"></up-input>
					<template #right>
						<up-button :customStyle="customStyle" type="primary" @click="refresh" size="normal" text="选择项目"></up-button>
					</template>
				</up-form-item>
				<up-form-item label="手机号类型" prop="typeName" label-width="100">
					<up-input @click="show2=!show2" v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择获取手机号方式"
						border="none"></up-input>
					<template #right>
						<up-button @click="show2=!show2" :customStyle="customStyle" type="primary" size="normal" text="选择类型"></up-button>
					</template>
				</up-form-item>
				<up-form-item label="手机" prop="phone" v-if="form.type==1">
					<up-input v-model="form.phone" disabled disabledColor="#ffffff" placeholder="获取到的手机号"
						border="none"></up-input>
					<template #right>
						<up-button @click="getPhoneFn" :customStyle="customStyle" type="primary" size="normal" text="获取手机"></up-button>
					</template>
				</up-form-item>
				<up-form-item label="指定手机号" prop="phone" label-width="86" v-else>
					<up-input v-model="form.phone" disabledColor="#ffffff" placeholder="请输入指定的手机号"
						border="none"></up-input>
					<template #right>
						<up-button @click="getPhoneFn2" :customStyle="customStyle" type="primary" size="normal" text="确认手机"></up-button>
					</template>
				</up-form-item>
			</view>
			<view class="box">
				<up-form-item label="手机号" prop="phone" labelWidth="60">
					<up-input v-model="form.phone" disabled disabledColor="#ffffff" placeholder="获取到的手机号"
						border="none"></up-input>
					<template #right>
						<up-button @click="$copy(form.phone)" :customStyle="customStyle" type="primary" size="normal" text="复制"></up-button>
					</template>
				</up-form-item>
				<up-form-item label="验证码" prop="sex" labelWidth="60">
					<up-input v-model="form.code" disabled disabledColor="#ffffff" placeholder="短信验证码"
						border="none"></up-input>
					<template #right>
						<up-button @click="$copy(form.code)" :customStyle="customStyle" type="primary" size="normal" text="复制"></up-button>
					</template>
				</up-form-item>
			</view>
		</up-form>
		<up-button class="btn" @click="getCode" type="primary" text="获取验证码"></up-button>
		<u-picker :show="show" @cancel="show=false" :columns="columns" keyName="mergeNames" @confirm="changeHandler"></u-picker>
		<!-- 获取手机方式 -->
		<u-picker :show="show2" @cancel="show2=false" :columns="columns2" keyName="label" @confirm="changeHandler2"></u-picker>
	</view>
</template>

<script setup>
	import { request } from "@/utils/request.js"
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {proxy} = getCurrentInstance()
	import {
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app"
	let customStyle = ref({
		height: '60rpx'
	})
	let show = ref(false)
	let show2 = ref(false)
	let columns = ref([])
	let columns2 = ref([
		[
			{label:'系统获取手机号',value:'1'},
			{label:'手动指定手机号',value:'2'},
		]
	])
	let serchValue = ref('')
	let scrollTop = ref('')
	let form = ref({
		typeName:'系统获取手机号', // 1系统获取手机号 2指定手机号
		type:'1',
		pid:'',
		phone:'',
	})
	let rules = ref({})
	let current = ref(0)
	// 创建响应式数据  
	const text1 = ref('请先熟悉使用后再充值');
	onShow(options => {
		getProject()
	})
	onPageScroll(e => {
		console.log(e);
		scrollTop.value = e.scrollTop;
	})

	function changeHandler(e) {
		show.value=false
		form.value.name = e.value[0].name
		form.value.pid = e.value[0].pid
		form.value.phone = ''
		form.value.code = ''
	}
	// 获取手机号方式 1 自动 2手动输入
	function changeHandler2(e) {
		show2.value=false
		form.value.type = e.value[0].value
		form.value.typeName = e.value[0].label
	}

	function swiperChange(e) {
		current.value = e.detail.current;
	}
	function refresh() {
		show.value=true
		// getProject()
	}
	// 获取项目
	function getProject(e) {
		request({
				url: 'app/listCollectProject',
				data:{}
		}).then(res=>{
				columns.value[0] = res.data.map(i=>{
					i.mergeNames = `${i.name}(${i.price})`
					return i
				})
		})
	}
	// 系统获取手机号
	function getPhoneFn() {
		if(!form.value.pid){
			return uni.showToast({
				icon:'none',
				title:"请先选择项目"
			})
		}
		request({
				url: 'app/getPhone',
				data:{sid:form.value.pid}
		}).then(res=>{
			if(res.data.code==0){
				form.value.phone=res.data.phone
			}else{
				proxy.$toast(res.data.msg,'none')
			}
		})
	}
	// 指定手机号
	function getPhoneFn2() {
		if(!form.value.pid){
			return uni.showToast({
				icon:'none',
				title:"请先选择项目"
			})
		}
		request({
				url: 'app/getSpecifiedPhone',
				data:{sid:form.value.pid,phone:form.value.phone}
		}).then(res=>{
			if(res.data.code==0){
				form.value.phone=res.data.phone
				proxy.$toast('获取成功','none')
			}else{
				proxy.$toast(res.data.msg,'none')
			}
		})
	}
	// 获取短信验证码
	function getCode() {
		if(!form.value.phone){
			return uni.showToast({
				icon:'none',
				title:"请先选择获取手机号"
			})
		}
		request({
				url: 'app/getCode',
				data:{phone:form.value.phone,sid:form.value.pid}
		}).then(res=>{
			if(res.data.code==0){
				proxy.$toast('获取成功','none')
				form.value.code=res.data.yzm
			}else{
				proxy.$toast(res.data.msg,'none')
			}
		})
	}
	const nav = (i) => {
		uni.navigateTo({
			url: i
		});
	}
	const tab = (i) => {
		uni.switchTab({
			url: i
		});
	}

	function scan() {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		/* #endif */
		/* #ifdef H5 */
		// padding-bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: scroll;
		padding-top: 0;

		::v-deep .status-bar {
			position: fixed;
			top: 0;
			;
			z-index: 9999;
			background: #000000;
		}

	}

	.wrap {
		padding: 20rpx;

		.box {
			margin-top: 20rpx;
			border: 1rpx solid #000000;
			padding: 20rpx 28rpx;
		}
	}
	.btn{
		margin-top: 100rpx;
	}
</style>